<template>
	<view class="content">
		<image class="head" src="/static/head2.png"></image>
		<u-tabs :list="list1" @change="changeTabs" lineColor="#d01d24" :current="current" :scrollable="false" />
		<view v-if="current === 0">
			<view style="width: 50%; float: left;" v-for="item in worksByVoteList" :key="item.worksKey">
				<uni-card style="margin:5px;">
					<image slot='cover' style="width: 100%; height: 150px; margin-top: 10px;" mode="aspectFill"
						:src="item.urlList[0]" @click="imgListPreview(item.urlList[0])"></image>
					<u--text :lines="1" :text="item.worksCopywriting" @click="clickToWorkdetails(item.worksKey)"></u--text>
					<u-divider :hairline="true"></u-divider>
					<u-row customStyle="margin-bottom: 10px">
						<u-col span="6">
							<view>
								<u-icon name="bookmark-fill" size="15" :label="item.worksVote + '票'" />
							</view>
						</u-col>
						<u-col span="6">
							<u-button type="primary" size="small" text="去投票" color="#d01d24"
								@click="clickAddVote(item.worksKey)" />
						</u-col>
					</u-row>
				</uni-card>
			</view>
			<view class="readmore">
				<u--text suffixIcon="more-dot-fill" iconStyle="font-size: 18px" text="点击查看更多"
					color="#606266" @click="toMore"></u--text>
			</view>
		</view>
		<view v-if="current === 1">
			<view style="width: 50%; float: left;" v-for="item in worksByTimeList" :key="item.worksKey">
				<uni-card style="margin:5px;">
					<image slot='cover' style="width: 100%; height: 150px; margin-top: 10px;" mode="aspectFill"
						:src="item.urlList[0]" @click="imgListPreview(item.urlList[0])"></image>
					<u--text :lines="1" :text="item.worksCopywriting" @click="clickToWorkdetails(item.worksKey)"></u--text>
					<u-divider :hairline="true"></u-divider>
					<u-row customStyle="margin-bottom: 10px">
						<u-col span="6">
							<view>
								<u-icon name="bookmark-fill" size="15" :label="item.worksVote + '票'" />
							</view>
						</u-col>
						<u-col span="6">
							<u-button type="primary" size="small" text="去投票" color="#d01d24"
								@click="clickAddVote(item.worksKey)" />
						</u-col>
					</u-row>
				</uni-card>
			</view>
			<view class="readmore">
				<u--text suffixIcon="more-dot-fill" iconStyle="font-size: 18px" text="点击查看更多"
					color="#606266" @click="toMore"></u--text>
			</view>
		</view>
	</view>
</template>

<script>
	import {
		getWorksByVote,
		getWorksByTime
	} from '@/api/system/works.js'
	import {
		addVote
	} from '@/api/system/votes.js'

	export default {
		data() {
			return {
				current: 0,
				list1: [{
					name: '投票排行',
				}, {
					name: '最新参与',
				}],
				// 表单参数
				form: {},
				// 查询参数
				queryParams: {
					pageNum: 1,
					pageSize: 20,
				},
				total: 0,
				worksByVoteList: [],
				worksByTimeList: [],
			}
		},
		onLoad: function() {
			this.getlist()
		},
		created() {

		},
		methods: {
			getlist() {
				getWorksByVote(this.queryParams).then(response => {
					console.log("按票数排序", response.rows)
					this.worksByVoteList = response.rows
					this.total = response.total;
				})
				getWorksByTime(this.queryParams).then(response => {
					console.log("按时间排序", response.rows)
					this.worksByTimeList = response.rows
					this.total = response.total;
				})
			},
			changeTabs(index) {
				this.current = index.index;
			},
			clickToWorkdetails(worksKey) {
				uni.navigateTo({
					url: '/pages/work/workDetails?key=' + worksKey
				});
			},
			clickAddVote(worksKey) {
				uni.showModal({
					title: '提示',
					content: '确定要为该作品投票吗？',
					success: function(res) {
						if (res.confirm) {
							this.form.worksKey = worksKey;
							addVote(this.form).then(respon => {
								if (respon) {
									uni.showToast({
										title: '投票成功！',
										icon: 'success',
										duration: 1000
									})
									this.getlist()
								}
							})
						} else if (res.cancel) {
							uni.showToast({
								title: '取消投票',
								icon: 'error',
								duration: 1000
							})
						}
					}.bind(this)
				});
			},
			imgListPreview(value) {
				var urlList = []
				urlList.push(value)
				uni.previewImage({
					indicator: "number",
					loop: true,
					urls: urlList
				})
			},
			toMore() {
				this.queryParams.pageSize += this.queryParams.pageSize
				this.getlist()
			}
		}
	}
</script>

<style>
	.head {
		width: 100%;
		height: 350rpx;
	}

	.readmore {
		margin-left: 40%;
		margin-bottom: 10px;
	}
</style>
